<template>
  <div>
    <a-card class="card" title="ROI数据">
      <a-range-picker
        :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                  '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
        :defaultValue="[moment().add(-1, 'days'), moment().add(-1, 'days')]"
        :disabled-date="disabledDate" @change="formDateChange" style="width:240px;" 
      />
      <div id="chart-mainD" style="height:500px"></div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import createChart from './createChart'
// import {getAllSummary} from '@/api/shuju/shuju'
import {getAllSummary} from '@/api/dianshang/dianshang'
let Chart = new createChart()

export default {
  name:'chengjiaoDataChart',
  data(){
    return{
      moment,
      form:{
        start_date: moment().add(-1, 'days').format("YYYY-MM-DD"),
        end_date: moment().add(-1, 'days').format("YYYY-MM-DD"),
      },
    }
  },
  created(){
    this.getAllNew()
  },
  mounted(){
    setTimeout(() => {
      var chartDom = document.getElementById('chart-mainD');
      Chart.init(chartDom)
    }, 0);
  },
  methods:{
    formDateChange(e){
      this.form.start_date = e[0].format("YYYY-MM-DD")
      this.form.end_date = e[1].format("YYYY-MM-DD")
      this.getAllNew()
    },
    getAllNew(){
      getAllSummary(this.form).then((res) => {
        if(res.errcode == 0){
          // chart 数据处理
          let legendData = ['ROI'] 
          let ziduan = ['ROI']
          let xAxisData = []
          let series = []
          for(let item of res.data){
            xAxisData.push(item.username)
          }
          for(let i in ziduan){
            series.push({
              name: legendData[i],
              data: res.data.map(e=>e.results[ziduan[i]] ? parseFloat(e.results[ziduan[i]]).toFixed(2) : 0)
            })
          }
          // console.log(legendData, xAxisData, series)
          this.setOption(legendData, xAxisData, series)
        }
      }).catch(() => {
        
      });
    },
    setOption(legendData, xAxisData, series){
      Chart.setOption(legendData, xAxisData, series)
    },
    disabledDate(current){
      return current && current > moment().endOf('day').add(-1, 'days');
    },
  }
}
</script>

<style lang="less" scoped>

</style>